<template><app-layout>
		<view class="template-order">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>记录</tn-nav-bar>

			<view class="list" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="li" v-for="(item,idx) in list" :key="idx"
					@click="tn(`/discoveryPages/hair/detail?id=${item.id}`)">
					<tn-list-cell unlined :arrow="true" :arrowRight="true">
						<view slot="default" class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex tn-flex-row-center  tn-flex-col-center">
								<view v-if="item.endResult===2" class="result tn-bg-red">
									阳性
								</view>
								<view v-else-if="item.endResult===1" class="result tn-bg-red">
									弱阳性
								</view>
								<view v-else-if="item.endResult===0" class="result tn-bg-green">
									阴性
								</view>
								<view v-else class="result tn-bg-orange">
									检测中
								</view>
								<view class="type ">
									{{item.sfbj==='1'?'补检':item.tqqs}}
								</view>
								<view class="date">
									{{item.sfbj?item.bjtqtime:item.tqtime}}
								</view>
							</view>


						</view>
					</tn-list-cell>
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<bottom-btn v-if="waitgroup" :subtext="'录入'" @save="save" @submit="tnface"></bottom-btn>
			<!--  #endif-->

			<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
			<view class='tn-tabbar-height'></view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import { mapGetters, mapState } from "vuex";
		export default {
			name: 'hairlist',
			mixins: [templatePageMixin],
			data() {
				return {
					page: 1,
					mfid: '',
					checkname: '',
					list: [],
				}
			},
			computed: {
				waitgroup() {
					let group = ['mj', 'pcs', 'zr', 'ld', 'dd', 'ys']
					return !group.includes(this.userinfo.usergroup)
				},
				...mapState({
					userinfo: state => state.userinfo,
				})
			},
			onShow() {
				if (!this.userinfo) {
					this.$user.getInfo()
				}
				this.getList()
			},
			onLoad(options) {
				if (options.mfid) {
					this.mfid = options.mfid
					this.checkname = options.checkname ? decodeURIComponent(options.checkname) : ''
				} else {
					uni.showModal({
						title: '提示',
						content: '用户ID不存在，请稍后再试',
						showCancel: false,
						success() {
							this.goBack()
						}
					})
				}
			},

			
			onReachBottom() {
				this.getList();
			},
			methods: {

				// 跳转
				tn(e) {
					uni.navigateTo({
						url: e,
					});
				},

				add() {

				},
				// 跳转需要选择用户并人脸识别
				tnface(return_url, type) {
					this.$t.vuex('return_url', `/discoveryPages/hair/add?mfid=${this.mfid}`)
					uni.redirectTo({
						//检查类型  1走访2尿检3发检
						url: `/discoveryPages/check?id=${this.mfid}&checktype=3`
						// url: `/discoveryPages/check?id=${this.mfid}&checkname=${this.checkname}`
					});
				},

				getList() {
					this.$t.message.loading("加载中");
					this.$request({
						url: this.$api.hair.list,
						data: {
							limit_page: this.page,limit_count:20,
							type: this.type,
							mfid: this.mfid
						}
					}).then(response => {
						this.$t.message.closeLoading();
						if (response.code === 0) {
							if (this.page !== 1) {
								this.list = this.list.concat(response.list);
							} else {
								this.list = response.list;
							}
							this.page = response.list.length ? this.page + 1 : this.page;
						}
					}).catch((msg) => {
						this.$t.message.toast(msg);
						this.$t.message.closeLoading();
					});
				},

			}
		}
</script>

<style lang="scss" scoped>
	.template-order {}

	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.list {
		// padding: 20rpx;

		.li {
			margin: 2rpx 0;
			border: 1px solid #eee;
			border-radius: 5px;

			.result {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				color: #fff;
				font-size: 30rpx;
			}

			.type {
				padding-right: 40rpx;
			}
		}
	}
</style>